<template>
  <div>
    <div v-show="!isEdit && !isAdd && !isAddChild">
      <jxf-titletip :title="title" @refreshPage="refreshPage"></jxf-titletip>
      <el-card class="jxf-table-card mt20">
        <div slot="header">
          <span>数据列表</span>
          <div>
            <el-button type="primary" @click="isAdd = true">添加</el-button>
          </div>
        </div>
        <jxf-table :table="tableInfo">
          <template slot="isEnable" slot-scope="scope">
            <el-switch
              v-model="scope.row.isEnable"
              @change="changeStatus(scope.row)">
            </el-switch>
          </template>
          <template slot="set" slot-scope="scope">
            <el-button class="mr10" v-if="scope.row.isEnable" type="text" @click="addChildInfo(scope.row)">新增下级</el-button>
            <router-link :to="'/secondClassification?parentId=' + scope.row.id"><span class="c-base">查看下级</span></router-link>
          </template>
          <template slot="operation" slot-scope="scope">
            <el-button type="text" @click="editClassifyInfo(scope.row)">编辑</el-button>
            <el-button v-if="!scope.row.isEnable" type="text" @click="deleteProductType(scope.row)">删除</el-button>
          </template>
        </jxf-table>
      </el-card>
      <jxf-pagination :pageTotal="pageTotal" :currentPage.sync='currentPage' :pageSize.sync="pageSize"
                      @currentPageChange="currentPageChange" @pageSizeChange="pageSizeChange"></jxf-pagination>

    </div>
    <AddFirstClassify v-show="isAdd" :isAdd.sync="isAdd" @getList="getList"></AddFirstClassify>
    <EditClassify v-show="isEdit" :isEdit.sync="isEdit" :classifyInfo="classifyInfo" @getList="getList"></EditClassify>
    <AddClassify ref="AddClassify" v-show="isAddChild" :isAdd.sync="isAddChild"></AddClassify>
  </div>
</template>

<script>
  import AddFirstClassify from "./components/AddFirstClassify"
  import AddClassify from "./components/AddClassify"
  import EditClassify from "./components/EditClassify"
  export default {
    name: "FirstClassification",
    components:{AddFirstClassify,EditClassify,AddClassify},
    data() {
      return {
        title: "一级分类",
        tableInfo: {},
        currentPage: 1,
        pageSize: 10,
        pageTotal: 0,
        isEdit:false,
        classifyInfo:{},
        isAdd:false,
        isAddChild:false
      }
    },
    methods: {
      // 表单初始化
      init() {
        this.tableInfo = {
          border: true,
          loading: true,
          tr: [
            {
              id: '1',
              label: '编号',
              prop: 'code'
            },
            {
              id: '2',
              label: '分类名称',
              prop: 'classifyName'
            },
            {
              id: '3',
              label: '级别',
              prop: 'classsifyLevel'
            },
            {
              id: '4',
              label: '是否启用',
              show: 'template',
              prop: 'isEnable'
            },
            {
              id: '5',
              label: '排序',
              prop: 'sort'
            },
            {
              id: '6',
              label: '设置',
              show: 'template',
              minWidth: "160",
              prop: 'set'
            },
            {
              id: '7',
              label: '操作',
              prop: 'operation',
              show: 'template',
              minWidth: "100",
              fixed: "right"
            }
          ],
          data: []
        }
      },
      // 获取列表
      getList() {
        let info = {type:1, pageSize: this.pageSize, pageNum: this.currentPage}
        ajax.post(apis.productType.getProductTypeList, info)
          .then(res => {
            if (res.success === true) {
              this.pageTotal = res.data.total
              if (res.data.dataList !== [] && res.data.dataList !== null) {
                this.tableInfo.data = this.formatData(res.data.dataList)
              } else {
                this.tableInfo.data = []
              }
              this.tableInfo.loading = false
            }
          })
      },
      // 禁用启用
      changeStatus(row) {
        let text = row.isEnable === true ? '确定要启用吗？' : '确定要禁用吗？'
        this.$confirm(text, '提示', {
          type: 'warning'
        }).then(() => {
          ajax.post(apis.productType.updateProductType, {id: row.id, isEnable : row.isEnable  === true ? 1 : 0,type:1})
            .then(res => {
              if (res.success === true) {
                this.$message({
                  message: res.message,
                  type: 'success'
                });
              } else {
                row.isEnable = !row.isEnable
                this.$message({
                  message: res.message,
                  type: 'error'
                });
              }
            })
        }).catch(() => {
          row.isEnable = !row.isEnable
        })
      },
      // 删除分类
      deleteProductType(row) {
        this.$confirm("确认是否删除此分类？", '删除分类', {
          type: 'warning'
        }).then(() => {
          ajax.post(apis.productType.deleteProductType, {id: row.id,type:1})
            .then(res => {
              if (res.success === true) {
                this.$message({
                  message: res.message,
                  type: 'success'
                });
                this.getList()
              } else {
                this.$message({
                  message: res.message,
                  type: 'error'
                });
              }
            })
        }).catch(() => {
        })
      },
      // 编辑分类
      editClassifyInfo(row) {
        this.isEdit = true
        this.classifyInfo ={
          type:1,
          id:row.id,
          parentClassifyName:"",
          classifyName :row.classifyName,
          isEnable:row.isEnable?1:0,
          sort :row.sort,
          remark :row.remark === null ? "" : row.remark
        }
      },
      // 添加下级分类
      addChildInfo(row) {
        this.isAddChild = true
        this.$refs.AddClassify.getProductType({type:2,id:row.id})
      },
      // 切换页面
      currentPageChange(pageNo) {
        this.currentPage = pageNo
        this.getList()
      },
      // 切换页面条数
      pageSizeChange(pageNo) {
        this.pageSize = pageNo
        this.getList()
      },
      // 分类列表数据处理
      formatData(list) {
        return list.map(item => {
          return {
            id: item.id,
            code: item.code,
            classifyName: item.classifyName,
            classsifyLevel: item.classsifyLevel,
            isEnable: item.isEnable === 1? true:false,
            sort: item.sort,
            parentId: item.parentId,
            remark:item.remark
          }
        })
      },
      // 刷新页面
      refreshPage() {
        this.currentPage = 1
        this.pageSize = 10
        this.getList()
      },
    },
    created() {
      this.init()
      this.getList()
    }
  }
</script>

<style lang="scss" scoped>
.mr10{
  margin-right: 10px;
}
</style>
